<template>
    <view class="box">
        <view class="boxson">
            <view class="header">
                <view>
                    <image class="img" src="../../static/img/dingdan-titlle-list@3x.png" mode=""></image>
                    <text class="text1">{{data.pickup_time_area}}</text>
                </view>
                <view>
                    <text class="text2" v-if="data.status == 1">待接单</text>
                    <text class="text2" v-if="data.status == 2">已接单</text>
                    <text class="text2" v-if="data.status == 3">已完成</text>
                    <text class="text2" v-if="data.status == -1">已取消</text>
                </view>
            </view>
            <!-- <view class="main" v-if="data.status == 1">
                <text>订单物品: <text v-for="(i, idx) in data.wp">{{i.wp_name + (idx == data.wp.length - 1 ? '' : ',')}} </text></text>
                <text>环保金: {{data.price > 0 ? data.price : '待确认' }}</text>
                <text>地址: {{data.location_address+data.recycling_address}}</text>
            </view> -->
            <view class="main">
                <view style="display: flex;">
                    <view>订单物品：</view>
                    <view style="flex: 1;">
                        <view v-for="(i, idx) in data.wp" :key="idx" style="display: flex;flex-wrap: wrap;">
                            <text>{{idx+1}}、</text>
                            <text style="margin-right: 30rpx;">名称: {{i.wp_name || '待定'}}</text>
							<text style="margin-right: 30rpx;">单价: {{i.unit_price}}</text>
							<text style="margin-right: 20rpx;">价格: {{i.total_price > 0 ?  i.total_price+'元' : '待确认'}}</text>
                            <text style="margin-right: 20rpx;">毛重: {{i.b_weigh}}</text>
							<text style="margin-right: 10rpx;">皮重: {{i.a_weigh}}</text>
                            <text >{{i.wp.unit?'数量':'重量'}}: {{i.nums > 0 ? (i.nums+i.weight) : '待确认'}}</text>
                        </view>
                    </view>
                </view>
                <view style="margin-top: 20rpx;">环保金：{{data.price > 0 ? data.price+'元' : '待确认' }}</view>
                <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
                    <text>客户名称：{{data.phone_name}}</text>
                    <text>手机号：{{data.mobile}}</text>
                </view>
                <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
                    <text>回收员：{{data.re_name || '待确认'}}</text>
                    <text>回收员手机号：{{data.re_phone || '待确认'}}</text>
                </view>
                <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
                    <text>接单时间：{{data.re_time || '待确认'}}</text>
                    <text>支付时间：{{data.pay_time || '待确认'}}</text>
                </view>
                <view style="margin-top: 20rpx;">接单服务站点：{{data.serviceaddress || '待确认'}}</view>
                <view style="margin-top: 20rpx;">地址：{{data.location_address+data.recycling_address}}</view>
                <view>备注：{{data.remsck ? data.remsck:''}}</view>
            </view>
            <view class="footer">
                <view style="display: flex;">
                    <view v-for="i in data.wp" :key="i">
                        <image class="img" :src="item" v-for="(item,index) in i.img" :key="index"></image>
                    </view>
                </view>
                <view>
                    <button class="button" @click="toCancel(data.id)" v-if="data.status == 1">取消预约</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            data: {
                type: Object,
                default: {},
            },
        },
        data() {
            return {
                toCancel(id) {
                    if(this.$u.test.isEmpty(id)) {
                        uni.showToast({
                            title: '订单号出错',
                            duration: 1000,
                            icon: 'none',
                        });
                        return ;
                    }
                    this.$u.api.postCancel({
                        id: id,
                    }).then(res => {
                        uni.showToast({
                            title: '取消成功',
                            duration: 1000,
                        });
                        this.$emit('list');
                    }).catch(err => {
                        uni.showToast({
                            title: err.msg,
                            duration: 1000,
                            icon: 'none'
                        });
                    })
                }
            };
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        background-color: #fff;
        padding: 30rpx;
        border-radius: 20rpx;
        // height: 315rpx;
        margin:0 30rpx 30rpx 30rpx;
    }

    .boxson {}

    .header {
        display: flex;
        justify-content: space-between;
        height: 98rpx;
        line-height: 98rpx;
        border-bottom: 1px solid #EEEEEE;

        .text1 {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #191919;
        }

        .text2 {
            font-size: 24rpx;
            color: #ff4200;
        }

        .img {
            width: 31rpx;
            height: 31rpx;
        }
    }

    .main {
        display: flex;
        // flex-wrap: wrap;
        flex-direction: column;
        // height: 104rpx;
        border-bottom: 1px solid #EEEEEE;
        padding: 18rpx 0;
        font-size: 24rpx;
        color: #888888;

        .text2 {
            margin-left: 76rpx;
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        padding: 18rpx 0;

        .img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 10rpx;
            margin-right: 10rpx;
            // background-color: pink;
        }

        .button {
            width: 163rpx;
            height: 60rpx;
            background-color: #f2f2f2;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #999999;
        }
    }
</style>
